<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="SvgC examples" />
   <link href="prettify.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../js/svg_c.js"></script>
  <script type="text/javascript" src="prettify.js"></script>
  <title>SvgC - demo1</title>
</head>
<body onload="prettyPrint()">
<div id="container">
  <span id="demo1" type="text/javascript">
    <script type="text/javascript">
      //<![CDATA[
      var arr = ["#1c1356", "#393490", "#2d5ba8","#007bae","#54aba5","#38a669","#95c33f", "#c7bb31", "#fea10a","#fbaf1e"];
      var qq = new SvgC("demo1", 400, 400);
      qq.attrs["@back"] = {fill:"#f6f6f6"};
      qq.rect("@back", 0, 0, 400, 400, {
        mousemove: function(evt) {
          var p = qq.from_client(evt.clientX, evt.clientY);
    	  var x = qq.circle(p.x, p.y, 10, {fill:arr[9]});
    	  x.rr = 10;
    	  var f = function() {
    	    if (x.rr > 0) {
    	      qq.set(x, "r", x.rr--);
    	      qq.set(x, "fill", arr[x.rr]);
    	      setTimeout(f, 200);
    	    } else {
    	      qq.root.removeChild(x);
    	    }
    	  }
    	  setTimeout(f, 100);
        }
      });
      //]]>
    </script>
  </span>

  <span id="demo2" type="text/javascript">
    <script type="text/javascript">
      //<![CDATA[
      var cc = new SvgC("demo2", 400, 400);
      cc.attrs["@back"] = {fill:"#f6f6f6"};
      cc.rect("@back", 0, 0, 400, 400, {
        mousemove: function(evt) {
          var p = cc.from_client(evt.clientX, evt.clientY);
    	  var x = cc.circle(p .x, p.y, 10, {fill:"#eaa"});
    	  x.rr = 10;
    	  var f = function() {
    	    if (x.rr > 0) {
    	      cc.set(x, "r", x.rr--);
    	      cc.set(x, "fill-opacity", x.rr/10);
    	      setTimeout(f, 200);
    	    } else {
    	      cc.root.removeChild(x);
    	    }
    	  }
    	  setTimeout(f, 200);
        }
      });
      //]]>
    </script>
  </span>
</div>
</body>
</html>
